const header = {
	props: ['headerData'],
	template: '<header class="aui-navBar aui-navBar-fixed" :style="\'background-color:\'+headerData.titleColor">'+
		'<a href="javascript:void(0)" class="aui-navBar-item" >'+
			'<i class="icon"></i>'+
		'</a>'+
		'<div class="aui-center">'+
			'<span class="aui-center-title">{{ headerData.title }}</span>'+
		'</div>'+
		'<a href="javascript:;" class="aui-navBar-item">'+
			'<i v-if="headerData.icon" :class="\'fa fa-fw \'+headerData.titleIcon" :style="\'color:\'+headerData.iconColor"></i>'+
		'</a>'+
	'</header>',
	mounted: function() {
		this.init();
	},
	methods: {
		init: function() {
			if(this.headerData.color) {
				$(".aui-center-title").css('color',this.headerData.color);
			}
		}
	}
}

Vue.component('vheader', header);